import React, { useEffect, useState } from "react";
import "./rated.less";

import { ratedApi } from "@/api/home";
import BScroll from "better-scroll";

import useDidUpdateEffect from "../../../../../hooks/useDidUpdateEffect";

const Rated = () => {
  const [ratedList, setRatedList] = useState([]);

  useEffect(() => {
    (async () => {
      const res = await ratedApi();
      setRatedList(res.result);
    })();
  }, []);

  useDidUpdateEffect(() => {
    new BScroll(".wrapper", {
      scrollX: true,
      scrollY: false,
    });
  }, [ratedList]);

  return (
    <div className="rated">
      <div className="title">最受好评电影</div>
      <div className="wrapper">
        <ul>
          {ratedList.map((item) => {
            return (
              <li key={item._id}>
                <div className="img-wrap">
                  <img src={item.imgUrl} alt="" />
                  {item.score ? (
                    <div className="shadow">观众评分: {item.score}</div>
                  ) : (
                    <div className="shadow">{item.wishNum}人想看</div>
                  )}
                </div>
                <p className="movie-title">{item.title}</p>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default Rated;
